因應某個小小專案需求...需要建立廣告輪播看版
剛好看到某個高手分享
How to Create an AdRotator using JavaScript?
就自己稍做改良~
<div id="ad"></div>
<script language="JavaScript" type="text/javascript">
function adshow(){
ads = new Array(5);
ads[0] = "<a href='http://www.yahoo.com' rel='nofollow'><img src='http://l.yimg.com/f/i/tw/hp/mh/12purple.gif' border='0' height='90px' width='480px'/></a>";
ads[1] = "<a href='http://www.google.com' rel='nofollow'><img src='https://www.google.com.tw/images/srpr/logo4w.png' border='0' height='90px' width='480px'/></a>";
ads[2] = "<a href='http://www.msn.com' rel='nofollow'><img src='http://sin.stb01.s-msn.com/i/C8/FFA381A7F279445EDEA5452DA53510.gif' border='0' height='90px' width='480px'/></a>";
ads[3] = "<a href='http://www.apple.com' rel='nofollow'><img src='http://images.apple.com/support/assets/images/products/programs/hero_programs.jpg' border='0' height='90px' width='480px'/></a>";
ads[4] = "<a href='http://www.amazon.com' rel='nofollow'><img src='https://sellercentral.amazon.com/forums/servlet/JiveServlet/download/79-177671-2508901-1990/Amazon-logo.jpg' border='0' height='90px' width='480px'/></a>";
index = Math.floor(Math.random() * ads.length);
document.getElementById("ad").innerHTML = ads[index];
}
setInterval(function(){adshow()},3000);
</script>
來交流一下。首先:
<pre class="c" name="code">ads = new Array(5);
這個寫法非常不JavaScript，變數宣告要加上var，不然就變成全域變數了。其次JavaScript的Array通常不會用new，也不會宣告數量，而是直接用陣列實字，像法比較是:
<pre class="c" name="code">var ads = [
"<a href='http://www.yahoo.com' rel='nofollow'><img src='http://l.yimg.com/f/i/tw/hp/mh/12purple.gif' border='0' height='90px' width='480px'/></a>",
"<a href='http://www.google.com' rel='nofollow'><img src='https://www.google.com.tw/images/srpr/logo4w.png' border='0' height='90px' width='480px'/></a>",
"<a href='http://www.msn.com' rel='nofollow'><img src='http://sin.stb01.s-msn.com/i/C8/FFA381A7F279445EDEA5452DA53510.gif' border='0' height='90px' width='480px'/></a>",...
]
另外，如果是我來寫的話，還會考慮兩件事。
1)資料和DOM物件分離
也就是說，我會把url和路徑獨立成一個array，例如
<pre class="c" name="code">var adData = [
{ link:''http://www.yahoo.com', imgSrc:"http://l.yimg.com/f/i/tw/hp/mh/12purple.gif"},
{ link:'http://www.google.com', imgSrc:"https://www.google.com.tw/images/srpr/logo4w.png"},...
讓資料歸資料，然後DOM的結構另外分出來，再用迴圈去合成，例如
<pre class="c" name="code"> for(var i=0; i<ads.length;i+=) {
adElms.push('<a href="'+ adData[i] +'" rel="nofollow"><img src="'+adData[i]+'" border="0" height="90px" width="480px" /></a>');}
這樣如果有需要調整html的結構時，例如改寬、高的值，只要改一個地方，5個都會全改。
2)製作DOM的效率
一直用innerHTML去隨機生成DOM，效率應該不如一開始先把5個生出來，用CSS藏好，再利用setInterval去切換css的狀態。
以上幾點供您參考。
給個讚！
雖然我看不太懂來龍去脈，但我相信一定是多年功力的累積，才能提出此獨到見地。
最重要的是，還願意完全分享，供大家據以精進。
感謝 lalabear 大大的心得分享 
小弟也不過是 Javascript 的新手...
拋磚引玉是希望可以吸引更多的高手提供更正確,更好的做法.
幫助更多的朋友~
就交流交流，互相進步。
下午有空的話，來寫個會動的版本。
另外想問，這個專案沒有用jQuery嗎? 用jQuery應該會比較方便。
lalabear提到：
另外想問，這個專案沒有用jQuery嗎? 用jQuery應該會比較方便。
是寫給學校小朋友, 專題用的 Sample, 怕再教他們用 jQuery... 他們會昏倒
iThome鐵人賽
看影片追技術